<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="称重日期：">
      <el-date-picker
        v-model="formInline.sDate"
        type="date"
        placeholder="请选择日期"
        style="width: 150px"
      />--
      <el-date-picker
        v-model="formInline.oDate"
        type="date"
        placeholder="请选择日期"
        style="width: 150px"
      />
    </el-form-item>
    <el-form-item label="猪只耳号：">
      <el-input
        v-model="formInline.earNumber"
        placeholder="请输入种母耳号"
        style="width: 150px"
      />
    </el-form-item>
    <el-form-item label="称重类型：">
      <el-select
        v-model="formInline.weighingTypeId"
        placeholder="请选择称重类型"
        style="width: 150px"
      >
        <el-option
          v-for="item in weighingType"
          :key="item"
          :label="item.weighingName"
          :value="item.weighingTypeId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="品种：">
      <el-select
        v-model="formInline.varietiesId"
        placeholder="请选择品种"
        style="width: 150px"
      >
        <el-option
          v-for="item in varieties"
          :key="item"
          :label="item.varietiesName"
          :value="item.varietiesId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="性别：">
      <el-select
        v-model="formInline.gender"
        placeholder="请选择性别"
        style="width: 150px"
      >
        <el-option label="公" :value="true" />
        <el-option label="母" :value="false" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="称重月龄：">
      <el-input
        v-model="formInline.fuzeren"
        placeholder="请输入月龄"
        style="width: 150px"
      />
      --
      <el-input
        v-model="formInline.fuzeren"
        placeholder="请输入月龄"
        style="width: 150px"
      />
    </el-form-item> -->
    <el-form-item>
      <el-button type="danger" @click="getData">查询</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
  <el-button type="danger" style="margin-bottom: 10px" @click="getAdd">
    +新增
  </el-button>
  <el-button type="danger" style="margin-bottom: 10px" disabled>
    删除
  </el-button>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column
      prop="pigsWeighingId"
      label="序号"
      align="center"
      width="80px"
    />
    <el-table-column
      prop="weighingDate"
      label="称重日期"
      align="center"
      width="180px"
    >
      <template #default="scoped">
        {{ scoped.row.weighingDate.substr(0, 19).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column
      prop="earNumber"
      label="耳号"
      align="center"
      width="150px"
    />
    <el-table-column
      prop="varietiesName"
      label="品种"
      align="center"
      width="100px"
    />
    <el-table-column prop="gender" label="性别" align="center" width="150px">
      <template #default="scoped">
        <el-text v-if="scoped.row.gender == true">公</el-text>
        <el-text v-else>母</el-text>
      </template>
    </el-table-column>
    <el-table-column
      prop="weighingName"
      label="称重类型"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="pigWeight"
      label="重量(公斤)"
      align="center"
      width="180px"
    />
    <el-table-column prop="" label="称重月龄" align="center" width="100px" />
    <el-table-column prop="" label="创建人" align="center" width="100px" />
    <el-table-column prop="" label="创建时间" align="center" width="100px" />
    <el-table-column prop="" label="修改人" align="center" width="100px" />
    <el-table-column prop="" label="修改时间" align="center" width="100px" />
    <el-table-column label="操作" align="center">
      <template #default>
        <el-button link type="primary">编辑</el-button>
        <el-button link type="primary">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="total,slot, prev, pager, next"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
          ，当前{{ formInline.pageIndex }}/{{
            formInline.pageCount
          }}页，每页显示{{ formInline.pageSize }}条
          <el-button
            class="btn-prev"
            link
            @click="handleCurrentChange(1)"
            :disabled="formInline.pageIndex == 1"
            >首页</el-button
          >
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="slot, sizes,jumper"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
          <el-button
            class="btn-prev"
            link
            @click="handleCurrentChange(formInline.pageCount)"
            :disabled="formInline.pageIndex == formInline.pageCount"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
const route = useRoute();
//品种
const varieties = ref([]);
const getVarieties = () => {
  axios
    .post(apiBedinUrl+"/api/Basics/SearchVarieties", {})
    .then((res) => {
      console.log("品种", res.data.data);
      varieties.value = res.data.data;
    });
};
//称重类型
const weighingType = ref([]);
const getWeighingType = () => {
  axios
    .post(apiBedinUrl+"/api/PigWeighings/SearchWeighingType", {})
    .then((res) => {
      console.log("称重类型", res.data.data);
      weighingType.value = res.data.data;
    });
};
//多选
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
//新增
const getAdd = () => {
  router.push("/PigsWeighingAdd");
};
//种猪历史
const formInline = reactive({
  sDate: null,
  oDate: null,
  weighingTypeId: 0,
  gender: null,
  earNumber: "",
  pigWeight: 0,
  varietiesId: 0,
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
});

const tableData = ref([]);
//猪只体重显示
const getData = () => {
  axios
    .post(apiBedinUrl+"/api/PigWeighings/SearchPigWeighing", {
      sDate: formInline.sDate,
      oDate: formInline.oDate,
      earNumber: formInline.earNumber,
      weighingTypeId: formInline.weighingTypeId,
      gender: formInline.gender,
      varietiesId: formInline.varietiesId,
      pageIndex: formInline.pageIndex,
      pageSize: formInline.pageSize,
    })
    .then((res) => {
      console.log("猪只体重列表", res.data);
      tableData.value = res.data.data.list;
      formInline.pageCount = res.data.data.pageCount;
      formInline.totalCount = res.data.data.totalCount;
    });
};

//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  formInline.pageSize = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  formInline.pageIndex = val;
  getData();
};
//生命周期钩子
onMounted(() => {
  getVarieties();
  getWeighingType();
  getData();
});
</script>

<style scoped></style>
